<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form class="formBtn" ref="form" :model="query" label-width="100px">
          <el-form-item label="学科名称">
             <el-input class="input" v-model="query.subjectName"></el-input>
             <el-button @click="clearBtn">清除</el-button>
             <el-button type="primary" @click="searchBtn">搜索</el-button>
             <el-button type="success" class="el-icon-edit" @click="addBtn"> &emsp;新增学科</el-button>
          </el-form-item>
        </el-form>

        <!-- 消息提示 -->
        <el-alert
           :title="`数据一共${counts}条`"
           type="info"
           :closable="false"
           show-icon>
        </el-alert>

        <!-- 表格 -->
        <el-table
           :data="tableData"
           style="width: 100%"
        >

          <el-table-column
            type="index"
            label="序号"
          >
          </el-table-column>

          <el-table-column
            prop="subjectName"
            label="学科名称"
          >
          </el-table-column>

          <el-table-column
            prop="username"
            label="创建者"
          >
          </el-table-column>

          <el-table-column
            width="160"
            prop="addDate"
            label="创建日期"
          >
            <template slot-scope="scope">
              {{scope.row.addDate | addDateTime}}
            </template>
          </el-table-column>

          <el-table-column
            label="前台是否显示"
            >
            <template slot-scope="scope">
              {{scope.row.isFrontDisplay | isFrontDisplay}}
            </template>
          </el-table-column>

          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录">
          </el-table-column>

          <el-table-column
            prop="tags"
            label="标签"
          >
          </el-table-column>

          <el-table-column
            prop="totals"
            label="题目数量"
          >
          </el-table-column>

          <el-table-column
            width="240"
            prop="address"
            class="wordBtn"
            label="操作"
          >
          <div slot-scope="scope">
            <el-button type="text" @click="$router.push('/subjects/directorys?id=' + scope.row.id +'&name='+scope.row.subjectName )">学科分类</el-button>
            <el-button type="text"  @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="editBtn(scope.row)">修改</el-button>
            <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
          </div>
          </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="query.pagesize"
          background
          layout=" prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 新增学科弹框 -->
        <el-dialog
          :title="this.isEdit ? '修改学科' : '新增学科'"
          :visible.sync="dialogVisible"
          width="400px"
          @close="closeFn"
          :close-on-click-modal="false"
        :close-on-press-escape="false"
        >
            <subjectAdd v-if="dialogVisible" :edit-form="editForm" :isEdit="isEdit" @close="closeFn" @submit-add="submitAdd"/>
        </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import subjectAdd from '../components/subjects-add.vue'
import dayjs from 'dayjs'
import { list, remove } from '../../api/hmmm/subjects'
export default {
  name: 'subject',
  components: {
    subjectAdd
  },

  // 过滤器
  filters: {
    isFrontDisplay (val) {
      // console.log('isFrontDisplay', val)
      if (val === 1) {
        return '是'
      } else {
        return '否'
      }
    },

    addDateTime (time) {
      // dayjs 方法接受需要格式化的时间
      // format 方法是指按照哪种格式对时间进行格式化
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  },

  data () {
    return {
      tableData: [],
      editForm: {},
      counts: 0,
      currentPage: 1,
      query: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      dialogVisible: false,
      isEdit: false
    }
  },

  created () {
    // 获取学科列表
    this.subjectList()
  },

  methods: {
    closeFn () {
      this.editForm = {}
      this.dialogVisible = false
    },

    // 获取学科列表
    async subjectList () {
      const res = await list(this.query)
      // console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 每页条数
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      // this.query.page = 1
      this.subjectList()
    },

    // 当前页
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.subjectList()
    },

    // 点击清除按钮
    clearBtn () {
      this.query.subjectName = ''
    },

    // 点击搜索按钮
    async searchBtn () {
      // console.log(this.form)
      // console.log(this.query)
      this.query.page = 1
      this.subjectList(this.query)
    },

    // 点击新增学科
    addBtn () {
      this.dialogVisible = true
      this.isEdit = false
    },

    // 新增学科
    async submitAdd () {
      this.dialogVisible = false
      this.subjectList()
    },

    // 修改学科
    editBtn (row) {
      this.dialogVisible = true
      this.isEdit = true
      // console.log(this.$refs.editForm)
      this.editForm = row
    },

    // 删除按钮
    async delBtn (row) {
      const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmRes)
      if (confirmRes === 'cancel') return this.$message.success('您已取消删除!')
      await remove(row)
      this.$message.success('删除成功！')

      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      this.subjectList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
.el-button{
  margin-left: 10px;
  width: 56px;
  font-size: 12px;
  padding: 9px 15px;
}
.el-icon-edit{
width: 97px;
float: right;
}
}
.input{
height: 32px;
}
.el-input {
width: 200px;
}
.el-pagination{
  float: right;
   margin-top: 20px;
  margin-bottom: 20px;
}
.el-alert{
  margin: 0 0 15px;
}
</style>
